/*
  学习目标：类的静态属性static

  使用步骤
1. 导入 prop-types 包 （不用下载，脚手架自带）
2. 使用：`组件名.propTypes = {}`  来给组件的props添加校验规则对象
3. 规则的数据类型，通过 `PropTypes`  对象来指定
 

### 约束规则
1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定结构的对象：shape   
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types'
export default class App extends Component {
    render() {
        return (
            <div>
                <Hello title="aaaa" obj={{ color: "hhh", fontSize: 12 }} isShow={true} fn={() => { }} count={123} child={<Child></ Child>}> </Hello>

            </div >
        );
    }
}
function Child() {
    return <h1>孩子</h1>
}

// function Hello(props) {
//     return <div>
//         123 {props.child}
//     </div>
// }

export class Hello extends Component {
    static propTypes = {
        // 字符串
        title: PropTypes.string,
        // 数字
        count: PropTypes.number,
        // 布尔值
        isShow: PropTypes.bool,
        // 函数
        fn: PropTypes.func,
        // JSX
        child: PropTypes.element,
        obj: PropTypes.shape({
            color: PropTypes.string.isRequired,
            fontSize: PropTypes.number.isRequired

        })
    }
    render() {
        const { child } = this.props
        return (
            <div>
                {child}
            </div>
        )
    }
}


// Hello.propTypes = {
//     // 字符串
//     title: PropTypes.string,
//     // 数字
//     count: PropTypes.number,
//     // 布尔值
//     isShow: PropTypes.bool,
//     // 函数
//     fn: PropTypes.func,
//     // JSX
//     child: PropTypes.element,
//     obj: PropTypes.shape({
//         color: PropTypes.string.isRequired,
//         fontSize: PropTypes.number.isRequired

//     })
// }